import React, { useEffect, useState, useRef } from 'react';
import { View, Button } from '@tarojs/components'
import { Mask } from '@/components/UiComponents'
import { fetchPrizeUserForUser } from '@/server/shop'
import { backgroundObj, loginData } from '@/utils/utils';
const MaskPeople = (props) => {
  const { visible = {}, onClose, dispatch, hpFlag } = props
  const { show = false, detail = {}, lotteryInfo = {} } = visible
  const { userPrizeList = [], goodsId } = detail
  const { lotteryInfo: data = {}
  } = lotteryInfo
  const { id } = data
  const account = loginData() || {}
  const { organizationId } = account
  const [list, setList] = useState([])
  useEffect(() => {
    if (show) {
      fetchData()
    }
  }, [show])
  const fetchData = () => {
    fetchPrizeUserForUser({
      goodsId,
      lotteryId: id,
      organizationId
    }).then(e => {
      const { prizeUserList } = e
      setList(prizeUserList)
    })
  }
  if (show) {
    return <Mask
      zIndex={10000000008}
      show={show}
      onClose={onClose}
    >
      <View className={hpFlag === '1' ? 'maskPeople_box maskPeople_box_hp' : 'maskPeople_box'}>
        <View>
          <View className='maskPeople_content'>
            <View className='maskPeople_content_title'>{userPrizeList.length}位中奖观众</View>
            <View className='maskPeople_content_userBox'>
              {list.map((item, index) => {
                const { username, profile, goodsName } = item
                return <View key={index} className='maskPeople_content_user'>
                  <View className='maskPeople_content_profile' style={backgroundObj(profile)}></View>
                  <View className='maskPeople_content_username'>{username}</View>
                  <View className='maskPeople_content_prizeName font_hide'>{goodsName}</View>
                </View>
              })}

            </View>
          </View>
          {/* <View className='MaskPeople_close'></View> */}
        </View>

      </View>
    </Mask>
  }
  else {
    return null
  }
}
export default MaskPeople